<template>
	<n-modal
		v-model:show="showModal"
		title="详情"
		preset="dialog"
		:show-icon="false"
		:mask-closable="false"
		style="width: 656px"
		@close="handleClose"
	>
		<div class="ll-modal-body">
			<div class="ll-modal-body-top">
				<div class="order-item">
					<span class="ll-title">编号：</span>
					<span>{{ detailInfo.seekNo }}</span>
				</div>
				<div class="order-item">
					<span class="ll-title">提交时间：</span>
					<span>{{ detailInfo.applyTime }}</span>
				</div>
			</div>
			<div class="ll-modal-body-main">
				<div class="ll-card">
					<div class="ll-card-title">
						<n-icon size="16">
							<HomeOutline />
						</n-icon>
						店铺信息
					</div>
					<div class="ll-card-body">
						<div class="ll-list-item">
							<span class="ll-list-item-title">商品名称：</span>
							<span>{{ detailInfo.productName }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">佣金模式：</span>
							<span>{{ detailInfo.commissionTypeNameList }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">佣金额度：</span>
							<span>{{ detailInfo.money }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">推广渠道：</span>
							<span>{{ detailInfo.channelTypeName }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">探店要求：</span>
							<span>{{ detailInfo.requireContent }}</span>
						</div>
					</div>
				</div>
				<div class="ll-card">
					<div class="ll-card-title">
						<n-icon size="16">
							<TimeOutline />
						</n-icon>
						主播历史合作
					</div>
					<div class="ll-card-body">
						<n-data-table
							:columns="columns"
							:style="{ height: '100%', background: '#fff' }"
							:data="totalBoard"
							:bordered="false"
						/>
					</div>
				</div>
				<div class="ll-card">
					<div class="ll-card-title">
						<n-icon size="16">
							<PersonOutline />
						</n-icon>
						主播信息
					</div>
					<div class="ll-card-body">
						<!-- nickName -->
						<div class="ll-list-item">
							<span class="ll-list-item-title">主播昵称：</span>
							<span>{{ detailInfo.nickName }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">推广平台：</span>
							<span>{{ detailInfo.agentChannelTypeName }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">账户名称：</span>
							<span>{{ detailInfo.channelAccount }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">渠道粉丝：</span>
							<span>{{ detailInfo.channelFens }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">账户类别：</span>
							<span>{{ detailInfo.channelAccountTypeName }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">所在位置：</span>
							<span>{{ detailInfo.province }}{{ detailInfo.city }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">手机号码：</span>
							<span>{{ detailInfo.mobile }}</span>
						</div>

						<div class="ll-list-item">
							<span class="ll-list-item-title">带货等级：</span>
							<span v-if="detailInfo.cargoLevel">LV{{ detailInfo.cargoLevel }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">带&nbsp;&nbsp;货&nbsp;&nbsp;分：</span>
							<span>{{ detailInfo.cargoPoints }}</span>
						</div>
					</div>
				</div>
				<div class="ll-card">
					<div class="ll-card-title">
						<n-icon size="16">
							<ChatboxEllipsesOutline />
						</n-icon>
						申请信息
					</div>
					<div class="ll-card-body">
						<div class="ll-list-item">
							<span class="ll-list-item-title">探店模式：</span>
							<span>{{ detailInfo.seekTypeVal }}</span>
						</div>

						<div class="ll-list-item">
							<span class="ll-list-item-title">佣金模式：</span>
							<span>{{ detailInfo.commissionTypeName }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">探店时间：</span>
							<span>{{ detailInfo.finalExploreTime }} {{ detailInfo.finalExploreTimeScope }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">探店人数：</span>
							<span>{{ detailInfo.explorePeople }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">预计发刊：</span>
							<span>{{ detailInfo.publishTime }} {{ detailInfo.publishTimeScope }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">探店门店：</span>
							<span>{{ detailInfo.exploreStore }}</span>
						</div>

						<div class="ll-list-item">
							<span class="ll-list-item-title">
								报&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：
							</span>
							<span>¥{{ detailInfo.finalPrice / 100 }}</span>
						</div>
						<div class="ll-list-item">
							<span class="ll-list-item-title">
								优&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;势：
							</span>
							<span>{{ detailInfo.advantage }}</span>
						</div>
						<div v-show="detailInfoVideo && detailInfoVideo.videoId" style="margin-bottom: 10px">
							<div class="ll-list-item">
								<span class="ll-list-item-title">视&nbsp;&nbsp;频&nbsp;&nbsp;ID：</span>
								<span>
									{{ detailInfoVideo && detailInfoVideo.videoId ? detailInfoVideo.videoId : '' }}
								</span>
							</div>
							<div class="ll-list-item">
								<span class="ll-list-item-title">视频链接：</span>
								<span>
									<a :href="detailInfoVideo.videoUrl" target="view_frame" style="color: #1d6fe9">
										{{ detailInfoVideo.videoUrl }}
									</a>
								</span>
							</div>
						</div>
						<!-- <div
							v-for="(sourceVideo, index) in detailInfo.originalVideo"
							:key="index"
							class="ll-list-item ll-list-item-source"
						>
							<span v-if="index === 0" class="ll-list-item-title">原&nbsp;视&nbsp;&nbsp;频：</span>
							<span v-else class="ll-list-item-title">&emsp;&emsp;&emsp;&emsp;&emsp;</span>
							<div class="ll-list-item-source-info">
								<div
									class="ll-list-item-source-info-url"
									:title="sourceVideo.url"
									@click="sourceVideoClick(sourceVideo.id, sourceVideo.uploadNo)"
								>
									{{ sourceVideo.url }}
								</div>
								<n-icon
									title="点击复制"
									size="22"
									@click="copyToClipboard(sourceVideo.id, sourceVideo.uploadNo)"
								>
									<CopyOutline />
								</n-icon>
							</div>
						</div> -->
					</div>
				</div>
				<div class="ll-card">
					<div class="ll-card-title">
						<n-icon size="16">
							<GitPullRequestOutline />
						</n-icon>
						审核流程
					</div>
					<n-timeline>
						<n-timeline-item
							v-for="item in approveRecords"
							:key="item.id"
							:title="
								item.result == 1
									? item.approveUserName + '（审批通过）'
									: item.approveUserName + '（审批拒绝）'
							"
							:time="item.approveTime"
						>
							<div class="timeline-content">
								<P>{{ item.approveMessage }}</P>
								<P v-if="item.additionMessage" class="subTitle">{{ item.additionMessage }}</P>
							</div>
						</n-timeline-item>
					</n-timeline>
				</div>
			</div>
		</div>
		<template #action>
			<n-button size="small" color="rgba(0, 0, 0, 0.1)" text-color="#333333" @click="handleClose">
				关闭
			</n-button>
		</template>
		<DYFXPlay ref="player" :video-url="videoUrl" />
	</n-modal>
</template>

<script setup>
import DYFXPlay from '@/components/DYFXPlay.vue';

import { reactive, ref, watch, h } from 'vue';
import {
	HomeOutline,
	PersonOutline,
	ChatboxEllipsesOutline,
	GitPullRequestOutline,
	CopyOutline,
	TimeOutline
} from '@vicons/ionicons5';
import useClipboard from 'vue-clipboard3';

// 导入API接口
import { applyDetail } from '@/api/applyReview';
import { useMessage } from 'naive-ui';
import { createAuthInfoUrlByAlgorithmA } from '../../../api/resourceApply';

const props = defineProps({
	modal: Boolean,
	applyId: {
		typeof: Number,
		default: 0
	}
});

const columns = [
	{
		title: '总带货销量毛利',
		key: 'totalSales',
		render(row) {
			let totalSales = row.totalSales && (row.totalSales / 100).toFixed(2);
			return [h('div', {}, `￥${row.totalSales ? totalSales : '0.00'}`)];
		}
	},
	{
		title: '总合作费用',
		key: 'totalCost',
		render(row) {
			let totalCost = row.totalCost && (row.totalCost / 100).toFixed(2);
			return [h('div', {}, `￥${row.totalCost ? totalCost : '0.00'}`)];
		}
	},
	{
		title: '总抖加费用',
		key: 'totalDouAdd',
		render(row) {
			let totalDouAdd = row.totalDouAdd && (row.totalDouAdd / 100).toFixed(2);
			return [h('div', {}, `￥${row.totalDouAdd ? totalDouAdd : '0.00'}`)];
		}
	},
	{
		title: '总利润',
		key: 'totalProfit',
		render(row) {
			let totalProfit = row.totalProfit && (row.totalProfit / 100).toFixed(2);
			return [h('div', {}, `￥${row.totalProfit ? totalProfit : '0.00'}`)];
		}
	}
];
const totalBoard = ref([]);
let detailInfo = ref({});
let detailInfoVideo = ref({});
let approveRecords = ref([]);

const emit = defineEmits(['update:modal']);

const showModal = ref(props.modal);

//获取审核详情
const getApplyDetail = async () => {
	const setForm = {
		id: props.applyId
	};
	const res = await applyDetail(setForm);
	if (res.code === 200) {
		detailInfo.value = res.data;
		detailInfo.value.commissionTypeNameList = '';
		detailInfoVideo.value = res.data && res.data.video ? res.data.video : {};
		let list = res.data.commissionTypeRespList;
		if (list && list.length > 0) {
			for (let index in list) {
				let item = list[index];
				detailInfo.value.commissionTypeNameList += item.commissionTypeStr;
				if (index < list.length - 1) {
					detailInfo.value.commissionTypeNameList += '、';
				}
			}
		}
		approveRecords.value = res.data.records;
		totalBoard.value = res.data.totalBoard ? [res.data.totalBoard] : [];
		console.log(res.data.totalBoard, 'res.data.totalBoard');
	}
};
// 关闭
const handleClose = () => {
	showModal.value = false;
	emit('update:modal', showModal.value);
};
//播放组件
const message = useMessage();
const videoUrl = ref('');
const player = ref(null);
const sourceVideoClick = (id, code) => {
	const params = { resourceApplyNo: code, resourceId: id, preview: false };
	createAuthInfoUrlByAlgorithmA(params).then(async (res) => {
		const { code, data } = res;
		if (code === 200 && data.length > 0) {
			player.value.openPlay();
			videoUrl.value = data;
		} else {
			message.success('播放失败，请重试！');
			console.log('播放失败！');
		}
	});
};
//复制文本

const { toClipboard } = useClipboard();
const copyToClipboard = async (id, code) => {
	const params = { resourceApplyNo: code, resourceId: id };
	createAuthInfoUrlByAlgorithmA(params).then(async (res) => {
		const { code, data } = res;
		if (code === 200 && data.length > 0) {
			try {
				await toClipboard(data);
				message.success('复制成功！');
				console.log('复制成功！');
			} catch (e) {
				message.error('复制失败，请重试！');
				console.log('复制失败，请重试！', e);
			}
		} else {
			message.error('复制失败，请重试！');
			console.log('复制失败，请重试！');
		}
	});
};

watch(
	() => ({ ...props }),
	(count) => {
		showModal.value = count.modal;
		if (count.modal) {
			getApplyDetail();
		}
	}
);
</script>

<style lang="less" scoped>
.ll-modal-body {
	&-top {
		display: flex;
		justify-self: start;
		margin-bottom: 12px;
		.order-item {
			font-size: 14px;
			color: #333333;
			margin-right: 32px;
			.ll-title {
				color: #666666;
			}
		}
	}
	&-main {
		max-height: 560px;
		overflow-y: auto;
	}
}

.ll-card {
	border-radius: 4px;
	border: 1px solid #f0f0f0;
	min-height: 218px;
	padding: 16px;
	background: #f0f0f0;
	box-sizing: border-box;
	margin-bottom: 8px;
	&:last-child {
		margin-bottom: 16px;
	}
	&-title {
		font-size: 16px;
		color: #333333;
		display: flex;
		align-items: center;
		margin-bottom: 16px;
	}
}

.ll-list-item {
	margin-bottom: 12px;
	font-size: 14px;
	color: #333333;
	&:last-child {
		margin-bottom: 0;
	}
	&-title {
		color: #666666;
		display: inline-block;
		width: 70px;
		text-align: right;
	}
}
.ll-list-item-source {
	display: flex;
	align-items: center;
}
.ll-list-item-source-info {
	display: flex;
	align-items: center;
	cursor: pointer;
	&-url {
		color: #1d6fe9;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 400px;
		display: inline-block;
		height: 22px;
	}
}

.timeline-content {
	p {
		margin-bottom: 5px;
	}
	.subTitle {
		color: #999;
		font-size: 12px;
	}
}
</style>
